<template>
  <view class="container">
    <uv-sticky bgColor="#fff" customNavHeight="32">
      <uv-tabs :list="statusList" @change="onStatusChange"></uv-tabs>
    </uv-sticky>
    <!-- 顶部汇总卡片 -->
    <uni-card margin="10px 0" padding="10px">
      <view class="summary-card">
        <view class="summary-header">
          <text class="summary-title">出库总览</text>
          <view class="refresh-button" @click="refreshData">
            <text class="refresh-text">刷新</text>
            <text class="refresh-icon">↻</text>
          </view>
        </view>
        <view class="summary-content">
          <view class="summary-item">
            <text class="summary-label">库存总量</text>
            <text class="summary-value"
              >{{ currentStatistics?.totalRemainingQuantity || 0 }} 吨</text
            >
          </view>
          <view class="summary-item">
            <text class="summary-label">库存总值</text>
            <text class="summary-value"
              >¥{{ currentStatistics?.totalRemainAmount }}</text
            >
          </view>
        </view>
      </view>
    </uni-card>

    <!-- 筛选区域 -->

    <!-- 库存数据列表 -->
    <view class="inventory-list-section">
      <view class="section-header">
        <text class="section-title">库存明细</text>
      </view>

      <!-- 数据表格 -->
      <scroll-view
        class="inventory-list-scroll"
        scroll-y
        :style="{ height: scrollViewHeight + 'px' }"
      >
        <!-- 表头 -->
        <view class="table-header">
          <view class="th th-manufacturer">厂商</view>
          <view class="th th-specification">规格</view>
          <view class="th th-quantity">库存量(吨)</view>
          <view class="th th-value">库存价值(元)</view>
          <view class="th th-status">状态</view>
        </view>

        <!-- 表格内容 -->
        <view class="table-body">
          <view
            v-if="currentStatistics?.list"
            v-for="(item, index) in currentStatistics.list"
            :key="index"
            class="table-row"
          >
            <view class="td td-manufacturer">{{ item.manufacturer }}</view>
            <view class="td td-specification">{{ item.specification }}</view>
            <view class="td td-quantity">{{
              item?.totalRemainingQuantity
            }}</view>
            <view class="td td-value">{{ item?.totalRemainAmount }}</view>
            <view class="td td-status">
              <text
                :class="[
                  'status-tag',
                  item?.totalRemainingQuantity > 500
                    ? 'status-sufficient'
                    : item?.totalRemainingQuantity > 100
                    ? 'status-medium'
                    : item?.totalRemainingQuantity > 50
                    ? 'status-warning'
                    : 'status-critical',
                ]"
              >
                {{
                  item?.totalRemainingQuantity > 500
                    ? "充足"
                    : item?.totalRemainingQuantity > 100
                    ? "适中"
                    : item?.totalRemainingQuantity > 50
                    ? "预警"
                    : "紧张"
                }}
              </text>
            </view>
          </view>

          <!-- 没有数据时的提示 -->
          <view v-if="currentStatistics?.list.length === 0" class="no-data">
            <text>暂无符合条件的库存数据</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick, watchEffect } from "vue";

// import uCharts from "@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js";
// const uniCloudInStockManager = uniCloud.importObject("inStockManager");
import cloudConfig from "@/config/uniCloudConfig.js";
const uniCloudInStockManager = cloudConfig.getCloudObject("inStockManager");
const statusList = ref([
  {
    name: "全部",
    key: "all",
  },
  {
    name: "未付款",
    key: "unPaid",
  },
  {
    name: "部分付款",
    key: "partPaid",
  },
  {
    name: "已付清",
    key: "paid",
  },
]);

const statusKey = ref("all");

const onStatusChange = (eData) => {
  statusKey.value = eData?.key;
};

const currentStatistics = computed(() => {
  return StockStatistics.value[statusKey.value];
});

//库存数据列表
const StockStatistics = ref({});

// 刷新数据
async function refreshData() {
  // 请求数据
  await getStatisticsData();
  // 这里可以添加从服务器刷新数据的逻辑
  uni.showToast({
    title: "数据已刷新",
    icon: "success",
  });
}
// 获取库存数据
async function getStatisticsData() {
  const userInfo = uni.getStorageSync("userInfo");

  try {
    let res = await uniCloudInStockManager.getStockStatistics(userInfo._id);
    StockStatistics.value = res.data;
  } catch (error) {
    StockStatistics.value = {};
    uni.showToast({
      title: "获取库存数据失败",
      icon: "none",
    });
  }
}

// 在组件挂载时初始化
onMounted(() => {
  getStatisticsData();
});
</script>

<style>
.container {
  /* padding: 10px; */
}

/* 汇总卡片样式 */
.summary-card {
  background-color: #fff;
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.summary-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.refresh-button {
  display: flex;
  align-items: center;
  color: #2979ff;
  font-size: 14px;
}

.refresh-icon {
  margin-left: 5px;
  font-size: 16px;
}

.summary-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.summary-item {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.summary-label {
  display: block;
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.summary-value {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.paid-amount {
  color: #67c23a;
}

.unpaid-amount {
  color: #f56c6c;
}

/* 筛选区域样式 */
.filter-area {
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.filter-group {
  width: 31%;
  margin-bottom: 10px;
}

.filter-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.filter-picker {
  width: 100%;
  height: 35px;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.picker-text {
  font-size: 14px;
  color: #333;
}

/* 库存列表样式 */
.inventory-list-section {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px 0;
  padding: 10px;
}

.section-header {
  margin-bottom: 15px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.inventory-list-scroll {
  width: 100%;
}

/* 表格样式 */
.table-header {
  display: flex;
  background-color: #f2f6fc;
  padding: 10px 0;
  font-weight: bold;
  text-align: center;
}

.th {
  flex: 1;
  padding: 0 5px;
  font-size: 14px;
  color: #606266;
}

.table-body {
  font-size: 14px;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #ebeef5;
  padding: 12px 0;
  text-align: center;
}

.td {
  flex: 1;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.th-manufacturer,
.td-manufacturer {
  flex: 1.5;
}

.status-tag {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  color: white;
}

.status-sufficient {
  background-color: #67c23a;
}

.status-medium {
  background-color: #409eff;
}

.status-warning {
  background-color: #e6a23c;
}

.status-critical {
  background-color: #f56c6c;
}

.no-data {
  padding: 30px 0;
  text-align: center;
  color: #909399;
}

/* 图表区域样式 */
.charts-section {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px 0;
  padding: 10px;
}

.tab-header {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 15px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
}

.tab-item.active {
  color: #2979ff;
  border-bottom: 2px solid #2979ff;
}

.chart-container {
  padding: 10px 0;
}

.chart-wrapper {
  width: 100%;
  height: 300px;
}

.uchart {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 500px) {
  .filter-group {
    width: 48%;
  }
}
</style>
